<template>
  <div>
    <el-popover
      v-model="needAdd"
      title="新增"
      placement="top"
      width="400"
      trigger="click"
      @hide="handleCancel"
      @show="handlePopoverShow"
    >
      <el-form ref="newDescForm" :model="tmp" label-width="80px" :rules="rules">
        <el-form-item label="语言类型" prop="lang">
          <el-input
            v-model="tmp.lang"
            placeholder="请输入语言类型"
            clearable
            @input="tmp.lang = tmp.lang !== undefined ? tmp.lang.trim(): ''"
          />
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input
            v-model="tmp.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入描述信息"
          />
        </el-form-item>
      </el-form>
      <div class="content-button">
        <el-button size="mini" @click="handleCancel">取消</el-button>
        <el-button type="primary" size="mini" @click="saveDescription">确认</el-button>
      </div>
      <el-button slot="reference" size="mini">添加描述</el-button>
    </el-popover>
    <el-button size="mini" style="margin-left: 8px" @click="removeAll">清除所有</el-button>
    <div class="show-area">
      <div v-for="item in model" :key="item.lang" class="desc-item">
        <el-tooltip placement="left" effect="light">
          <div>
            <div class="item-lang">{{ item.lang }}</div>
            <div class="item-description">{{ item.description }}</div>
            <el-button class="close-button" type="text" @click="removeItem(item)">
              <i class="el-icon-close" />
            </el-button>
          </div>
          <div slot="content" class="tip-item">
            语言类型：{{ item.lang }}
            <br>
            描述信息：{{ item.description }}
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .content-button {
    float: right;
  }
  .tip-item {
    width: 300px;
  }
  .desc-item {
    line-height: 20px;
  }
  .desc-item:hover {
    background-color: #F4F4F5;
    color: #409EFF;
  }
  .item-lang {
    float: left;
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-description {
    float: left;
    width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .close-button {
    padding: 0 0 0 8px;
  }
</style>
<script>
export default {
  name: 'MultiDescription',
  props: {
    'model': {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      tmp: { lang: '', description: '' },
      rules: {},
      descriptionList: [],
      needAdd: false
    }
  },
  created() {
  },
  mounted() {
    const uniqueLang = (rule, value, callback) => {
      const index = this.model.findIndex(item => { return item.lang === value })
      if (index !== -1) {
        callback(new Error('当前语言的描述信息已存在'))
      } else {
        callback()
      }
    }
    this.rules = {
      lang: [
        { required: true, message: '请输入语言类型', trigger: 'blur' },
        { validator: uniqueLang, trigger: 'blur' }
      ],
      description: [{ required: true, message: '请输入描述信息', trigger: 'blur' }]
    }
  },
  methods: {
    handlePopoverShow: function() {
      this.$refs['newDescForm'].resetFields()
    },
    saveDescription: function() {
      this.$refs['newDescForm'].validate((valid) => {
        if (valid) {
          this.model.unshift(JSON.parse(JSON.stringify(this.tmp)))
          this.handleCancel()
        }
      })
    },
    handleCancel: function() {
      this.resetTempInfo()
      this.needAdd = false
    },
    resetTempInfo() {
      this.$refs['newDescForm'].resetFields()
    },
    removeAll: function() {
      this.$emit('update:model', [])
    },
    removeItem: function(item) {
      const index = this.model.findIndex(tmp => {
        return tmp.lang === item.lang
      })
      this.model.splice(index, 1)
    }
  }
}
</script>
